/* 
   Document   : products
   Created on : 21/03/2012, 01:58:33 م
   Author     : Hassan
   Description:
       Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/


/*xxxxxxxxxxxxxxxxxxxxxxxxx*/

#cssmenu {
	background: #333;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 12em;
}
#cssmenu li {
	font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
#cssmenu a {
	background: #1c558a;
	border-bottom: 1px solid #393939;
	color: #ccc;
	display: block;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
	font-weight:normal;
}
#cssmenu a:hover {
	background: #2580a2 url('images/hover.gif') left center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

/********************************************************************************************/

#opacityDiv{
    height: 100%;
    width: 100%;
    /*    background-color: gray;*/
    background-image: url('../../images/invisibleBack.png');
    opacity:0.6;
    position: fixed;
    /*    display: inline;*/
    display: none;
}
.infoDiv{
    width: 600px;
    height: 300px;
    background-image: url('../../images/productInfoBack.png');
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    display: none;
    border-radius:5px;
    position: fixed;
    margin-left: 350px;
}
#infoDivProduct{
    width: 100%;
    height: 100%;
}
#infoDivPic{
/*        background-color: #2D2D2D;*/
    width: 30%;
    height: 100%;
    float: left;
    margin-top: 40px;
}
#infoDivPic img{
    display: block;
    margin-left: 10px;
    margin-top: 20px;
}
#infoDivDetails{
    margin-top: 40px;
    /*    background-color: #cccccc;*/
    /*    opacity:0.5;*/
    width: 59%;
    height: 75%;
    float: left;
}
#infoDivDetails table{
    border-left-style: dotted;
    border-left-width: 1px;
    border-left-color: #1E1E1E;
    margin: auto;
    margin-left: 50px;
    color: #05465F;
    font-size: 14px;
    margin-top: 20px;
    text-align: left;
}
#infoDivDetails table td{
    margin: auto;
    height: 30px;
    /*    border-style: solid;*/

    text-align: left;
}
.infoDivButtons{
    float: right;
    margin-right: -5px;
    margin-top: -5px;
}
.closeInfoDiv{
    margin: auto;
    display: block;
    position: relative;
    height: 20px;
    width: 80px;
    /*    border-radius:5px 0px 0px;*/
    background-color:#1E1E1E;
    color: white;
    /*    background-image: url('../../images/buy.png');*/
    font-size: 14px;
    margin-top: 5px;
    border: none;
    text-align: center;
}

/*******************/
/*******************/
/*******************/
/*******************/
#container{
    width: 900px;
    min-height: 300px;
    margin-left: 300px;
    margin-right: auto;
    margin-top: 50px;
	//border-style:dashed;
    //    background-color: #494949;*/
	
}

#m{
  width: 210px;
    margin-left: 240px;
    margin-top: 50px;
	//border-style:dashed;
    float:left;
	min-height: 200px;
}
#catrgoriesArea{
    height: 300px;
    width: 20%;
    background-color: #05465F;
    float: left;
    overflow: hidden;
    border-radius:5px;
}
#catrgoriesTitle{
    height: 10%;
    width: 100%;
    background-color: #1E1E1E;

}
#catrgoriesTitle h2{
    padding: 5px;
    color: white;
    font-weight: normal;
    font-size: 16px;
}
/*****************************/

#productsArea{
    width: 75%;
    min-height: 300px;
    float: left;
    //margin-left: 0%;
    overflow: hidden;
	//border-style:dashed;
    /*    background-color: #1E1E1E;*/
}
.productSlice{
    width: 120px;
    height: 200px;
/*    overflow: hidden;*/
    /*    background-color: black;*/
    border-radius:5px;
    float: left;
    margin-bottom:  20px;
    margin-left: 40px;
    padding-top: 5px;
}
.productSlice:hover{
    background-image: url('../../images/productBack1.png');
}
.productSliceImage{
    width: 100px;
    height: 60%;
    overflow: hidden;
    background-image: url('../../images/productBack.png');
    border-radius:5px;
    margin-left: auto;
    margin-right: auto;
}
.productSliceImage img{
    margin-top: 5px;
    margin-left: 5%;

}
.productSliceInfo{
    width: 100%;
    height: 20%;
    overflow: hidden;
    /*    background-color: gray;*/
    border-radius:5px;
    margin-left: auto;
    margin-right: auto;
}
.productSliceInfo h2{
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 1px;
}
.productSliceInfo h3{
    color: black    ;
    text-align: center;
    font-size: 14px;
}
.productSliceButtons{
    padding-top: 10px;
    width: 100%;
    height: 20%;
    overflow: hidden;
    /*    background-color: gray;*/
    border-radius:5px;
    margin-left: auto;
    margin-right: auto;
}
.info{
    width: 40%;
    border-radius:0px 0px 5px;
    border: none;
    /*    background-color: #cccccc;*/
/*    background-image: url('../../images/info.png');*/
    float: left;
    background-color: #E5E5E5;
    color: #1E1E1E;

}
.info:hover{
    background-color: #cccccc;
/*    color: white;*/

}
.buy{

    width: 40%;
    border-radius:5px 0px 0px;
    float: left;
    background-color: #0080FF;
/*    background-image: url('../../images/buy.png');*/
    margin-left: 10%;
    border: none;
    color: white;
    text-align: center;
}
.buy:hover{
    background-color: mediumseagreen;
}


.delete{

    width: 40%;
    border-radius:5px 0px 0px;
    float: left;
        background-color: brown;
/*    background-image: url('../../images/buy.png');*/
    margin-left: 10%;

    border: none;
}
.delete:hover{

        background-color: darkred;
}


